<script setup lang="ts" name="ImagePreviewPagination">
const props = withDefaults(
	defineProps<{
		data: any[];
		loading: boolean;
		page: BasicTableNameSpace.PageType;
		valueKey?: string;
	}>(),
	{
		data: () => [],
		loading: false,
		valueKey: 'url',
		page: () => ({
			currentPage: 1,
			pageSize: 30,
			pageSizes: [10, 20, 30, 50],
			total: 0,
			layout: 'total, sizes, prev, pager, next, jumper',
		}),
	}
);

const emits = defineEmits<{
	'update:page': [data: BasicTableNameSpace.PageType];
	'current-change': [val: number];
	'size-change': [val: number];
}>();
console.log(emits);
const pagination = reactive({
	currentPage: props.page.currentPage || 1,
	pageSize: props.page.pageSize || 10,
	pageSizes: [10, 20, 30, 50],
	total: props.page.total || 0,
	layout: 'total, sizes, prev, pager, next, jumper',
	background: props.page.background || false,
});
watch(
	() => props.page,
	(val) => {
		pagination.currentPage = val.currentPage || pagination.currentPage;
		pagination.pageSize = val.pageSize || pagination.pageSize;
		pagination.pageSizes = val.pageSizes || pagination.pageSizes;
		pagination.total = Number.isInteger(val.total) ? val.total : pagination.total;
		pagination.layout = val.layout || pagination.layout;
		pagination.background = val.background || pagination.background;
	},
	{
		deep: true,
	}
);

// function sizeChange(val: number) {
// 	emits('update:page', pagination);
// 	emits('size-change', val);
// }
// function currentChange(val: number) {
// 	emits('update:page', pagination);
// 	emits('current-change', val);
// }

/* ------------------ 图片预览 ---------------------- */
const showImagePreview = ref(false);
const imgPreviewList = ref<string[]>([]);
function previewImg(data: any) {
	showImagePreview.value = true;
	imgPreviewList.value = [data];
}
function closePreview() {
	showImagePreview.value = false;
}
</script>

<template>
	<div class="image-content relative overflow-y-auto">
		<el-empty class="absolute w-full" v-if="!loading && data.length === 0" description="暂无图片" />
		<div v-loading="loading" class="image-container">
			<div v-for="item in data" :key="item" class="flex flex-col text-[#979797] text-xs bg-[#F3F3F3] p-[7px]">
				<!-- <span>{{ item.time }}</span> -->
				<div class="img-container mt-1 relative">
					<img :src="item" />
					<div class="img-mask absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
						<el-button class="mask-btn !text-white" @click="previewImg(item)">查看大图</el-button>
						<slot name="imgMaskBtn" :data="item"></slot>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- <div class="pagination flex justify-center">
		<el-pagination
			v-model:current-page="pagination.currentPage"
			v-model:page-size="pagination.pageSize"
			:page-sizes="pagination.pageSizes"
			:layout="pagination.layout"
			:total="pagination.total"
			:background="pagination.background"
			@size-change="sizeChange"
			@current-change="currentChange"
		/>
	</div> -->

	<el-image-viewer v-if="showImagePreview" :zoom-rate="1.2" :url-list="imgPreviewList" @close="closePreview" />
</template>

<style lang="scss" scoped>
.image-content {
	height: 560px;

	.image-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, 304px);
		row-gap: 10px;
		column-gap: 10px;
		.img-container {
			height: 174px;
			width: 289px;
			cursor: pointer;
			img {
				height: inherit;
				width: inherit;
			}

			.img-mask {
				visibility: hidden;
				opacity: 0;
				background: rgba(0, 0, 0, 0.5);
				transition: opacity 0.3s ease;

				.mask-btn {
					width: 119px;
					height: 36px;
					background: rgba(0, 0, 0, 0.51);
					border-radius: 4px;
					border: 1px solid #ffffff;
				}
			}

			&:hover .img-mask {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

.pagination {
	:deep(.el-pagination) {
		--el-pagination-font-size: 13px;
		--el-pagination-button-height: 28px;
		--el-pagination-button-width: 28px;
		--el-component-size: 28px;

		.el-select {
			width: 88px;
			.el-select__wrapper {
				min-height: 28px;
				font-size: 13px;
				padding-left: 8px;
				padding-right: 8px;
			}
		}

		.el-pagination__editor.el-input {
			width: 48px;
			font-size: 13px;
		}

		.el-pager li,
		.btn-prev,
		.btn-next {
			background-color: var(--el-color-white);
			border: 1px solid #dddddd;
			border-radius: 3px;
		}

		.el-pager li.is-active {
			background-color: var(--el-color-white) !important;
			color: var(--el-color-primary) !important;
			border: 1px solid var(--el-color-primary);
		}
	}
}
</style>
